import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, TextInput, Image } from 'react-native';
import { Container, Content, View, DatePicker, Text, Icon, ActionSheet, Toast } from 'native-base';
import { ListItem } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';
import Moment from 'moment';

import { Header } from '../../component';
import { Colors, Metrics } from '../../theme';
import Http from '../../utils/HttpPost';

var tijiaoXs = ["2小时", "3小时", "4小时", "5小时", "6小时", "12小时", "24小时", "48小时", "72小时"];
var shenheZq = ["12小时", "24小时", "48小时", "72小时"];

class OrderPlace extends Component {
	constructor(props) {
		super(props);
		this.state = {
			chosenDate: new Date(),
			getFullYear: new Date().getFullYear(),
			getMonth: new Date().getMonth(),
			getDate: new Date().getDate(),
			tijiaoXsClicked: '请选择',
			shenheZqClicked: '请选择',
		}
		this.setDate = this.setDate.bind(this);
	}

	setDate(newDate) {
		this.setState({ chosenDate: newDate });
	}

	UNSAFE_componentWillMount() {

	}

	componentDidMount() {
		console.log(this.props.publish.publishType)
	}

	submitPublishFunc() {
		let endTime = new Date(this.state.chosenDate.toString()).getTime()+'';
		let tijiaoXsClicked = this.state.tijiaoXsClicked;
		let shenheZqClicked = this.state.shenheZqClicked;

		if(!this.state.unitPrice){
			Toast.show({ text: "请填写单价", textStyle: { textAlign: "center" }, type: "warning" });
			return false;
		}

		if(!this.state.number){
			Toast.show({ text: "请填写数量", textStyle: { textAlign: "center" }, type: "warning" });
			return false;
		}

		if(!this.state.chosenDate){
			Toast.show({ text: "请选择结束时间", textStyle: { textAlign: "center" }, type: "warning" });
			return false;
		}

		if (this.state.tijiaoXsClicked != '请选择') {
			tijiaoXsClicked = this.state.tijiaoXsClicked.replace("小时","")
		}else{
			Toast.show({ text: "请选择提交限时", textStyle: { textAlign: "center" }, type: "warning" });
			return false;
		}
		if (this.state.shenheZqClicked != '请选择') {
			shenheZqClicked = this.state.shenheZqClicked.replace("小时","")
		}else{
			Toast.show({ text: "请选择审核周期", textStyle: { textAlign: "center" }, type: "warning" });
			return false;
		}

		this.setState({isLoading: true})
		Http('post',"/publish/postTask", { 
			publishType: this.props.publish.publishType,
			appName: this.props.publish.appName,
			title: this.props.publish.title,
			describe: this.props.publish.describe,
			addressLink: this.props.publish.addressLink,
			buzouArr: JSON.stringify(this.props.publish.buzouArr),
			submitText: this.props.publish.submitText,

			unitPrice: this.state.unitPrice,
			number: this.state.number,
			endTime: endTime,
			tijiaoXs: tijiaoXsClicked,
			shenheZq: shenheZqClicked,
		}).then(res => {
			this.setState({isLoading: false})
			if (res.code === 200) {
				Toast.show({ text: "发布成功！", textStyle: { textAlign: "center" }, type: "success" });
				this.props.navigation.navigate('Publish'); 
			}
		})
	}

	render() {
		return (
			<Container>
				<Header title="发布任务2/2" onLeftPress={() => this.props.navigation.goBack()} />
				<Content>
					<View style={Styles.container}>
						<View style={Styles.buzou1}>
							<Text style={Styles.inputTit}>投放单价 <Text style={{ color: Colors.hong }}>*</Text> </Text>
							<TextInput
								style={Styles.inputText}
								placeholder='最低0.2元'
								keyboardType='number-pad'
								value={this.state.unitPrice}
								onChangeText={(value) => this.setState({ unitPrice: value })}
							/>

							<Text style={Styles.inputTit}>投放数量 <Text style={{ color: Colors.hong }}>*</Text> </Text>
							<TextInput
								style={Styles.inputText}
								placeholder='最低10个'
								keyboardType='number-pad'
								value={this.state.number}
								onChangeText={(value) => this.setState({ number: value })}
							/>

							<Text style={Styles.inputTit}>结束时间 <Text style={{ color: Colors.hong }}>*</Text> </Text>
							<DatePicker
								minimumDate={new Date(this.state.getFullYear, this.state.getMonth, this.state.getDate)}
								maximumDate={new Date(this.state.getFullYear, this.state.getMonth + 3, this.state.getDate)}
								locale={"zh"}
								timeZoneOffsetInMinutes={undefined}
								modalTransparent={false}
								animationType={"fade"}
								androidMode={"default"}
								placeHolderText="请选择"
								textStyle={{ color: Colors.subject, fontSize: Metrics.fontSize14 }}
								placeHolderTextStyle={{ color: Colors.huiCc, fontSize: Metrics.fontSize14 }}
								onDateChange={this.setDate}
								disabled={false}
							/>

							<Text style={Styles.inputTit}>提交限时 <Text style={{ color: Colors.hong }}>*</Text> </Text>
							<Text style={[Styles.inputTextLs, { color: this.state.tijiaoXsClicked == '请选择' ? Colors.huiCc : Colors.hui33 }]} onPress={() =>
								ActionSheet.show(
									{
										options: tijiaoXs,
										title: "请选择"
									},
									buttonIndex => {
										this.setState({ tijiaoXsClicked: tijiaoXs[buttonIndex] });
									}
								)}>{this.state.tijiaoXsClicked}</Text>

							<Text style={Styles.inputTit}>审核周期 <Text style={{ color: Colors.hong }}>*</Text> </Text>
							<Text style={[Styles.inputTextLs, { color: this.state.tijiaoXsClicked == '请选择' ? Colors.huiCc : Colors.hui33 }]} onPress={() =>
								ActionSheet.show(
									{
										options: shenheZq,
										title: "请选择"
									},
									buttonIndex => {
										this.setState({ shenheZqClicked: shenheZq[buttonIndex] });
									}
								)}>{this.state.shenheZqClicked}</Text>

							<Text style={{ textAlign: "center", marginTop: 6, paddingTop: 12, fontSize: Metrics.fontSize14, borderTopColor: Colors.huiCc, borderTopWidth: StyleSheet.hairlineWidth }}>
								总计 
									<Text style={{fontSize: Metrics.fontSize18,color:Colors.ju}}>￥ 0.00</Text>
							</Text>
						</View>

					</View>

					<View style={Styles.btnContentView}>
						<TouchableOpacity onPress={() => this.submitPublishFunc()} disabled={this.state.isLoading}>
							<LinearGradient style={{ width: Metrics.screenWidth * 0.8, alignItems: "center", borderRadius: 8 }} colors={[Colors.subjectJbZuo, Colors.subject]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
								<Text style={{ fontSize: 14, padding: 12, color: Colors.bai }}>{`${this.state.isLoading ? "请求中..." : "发布任务"}`}</Text>
							</LinearGradient>
						</TouchableOpacity>
					</View>

				</Content>
			</Container>
		);
	}

}

const mapStateToProps = state => ({
	logged: state.user.logged,
	token: state.user.token,
	publish: state.publish,
});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(OrderPlace);

const Styles = StyleSheet.create({
	container: { flex: 1, backgroundColor: '#FFFFFF' },
	btnContentView: { marginTop: 38, alignItems: "center" },
	buzou1: { padding: 10 },
	inputTit: {
		fontSize: Metrics.fontSize14,
		color: Colors.hui33,
		marginTop: 6,
		marginLeft: 6
	},
	cardStyle: {
		height: 50,
		marginLeft: 15,
		paddingRight: 10,
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		borderBottomWidth: StyleSheet.hairlineWidth,
		borderColor: Colors.C7,
	},
	itemLeftCont: { flexDirection: "row", },
	rightIcons: { color: '#aab9ca', fontSize: Metrics.fontSize18 },
	inputText: {
		paddingLeft: 10,
	},
	inputTextLs: {
		lineHeight: 30,
		marginTop: 10,
		marginLeft: 10,
		fontSize: Metrics.fontSize14,
		color: Colors.huiCc
	}
});